<script lang="ts" setup>
import { ref, computed } from 'vue'
import MoreDialog from './dialogs/more-dialog.vue'
import treeSelect from '@/components/tree-select-edl/index.vue'
import treeSelectAll from '@/components/tree-select-edl/treeSelect.vue'
const emits = defineEmits(['searchEvent'])

// 获取ref
const moreDialog = ref()

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  formLabel: {
    type: Object,
  },
  queryDataObj: {
    type: Object,
  },
  optionsObj: {
    type: Object,
  },
  moreShow: {
    type: Boolean,
  },
})

const formLabelList = computed(() => {
  return props.formLabel?.filter((item: any) => item.iswm === 'Y')
})

// 入参

// 点击更多条件按钮
const moreClickBtn = () => {
  moreDialog.value.openDialog()
}

// 点击查询按钮
const searchHandle = () => {
  emits('searchEvent', props.formData)
}

// 弹框传递过来的查询
const searchEvent = (objData: any) => {
  emits('searchEvent', objData)
}

//

// 生命周期
</script>
<template>
  <div class="container">
    <el-form
      ref="form"
      class="form-style"
      :inline="true"
      label-width="100px"
      :model="props.formData"
    >
      <el-form-item
        :label="item.label"
        :required="item.required"
        v-for="(item, index) in formLabelList"
        :key="index"
        class="item-form"
        :style="{ width: item.width }"
      >
        <!-- 输入框 -->
        <el-input
          :disabled="item.disabled"
          v-model.trim="props.formData[item.prop]"
          :placeholder="item.placeholder"
          maxlength="100"
          clearable
          v-if="item.type == 'input'"
          @keyup.enter="searchHandle"
        />
        <!-- 选择框 -->
        <el-select
          :multiple="item.multiple"
          :disabled="item.disabled"
          v-model="props.formData[item.prop]"
          :placeholder="item.placeholder"
          clearable
          v-else-if="item.type == 'select'"
        >
          <el-option
            v-for="iten in item.options?.length ? item.options : props.optionsObj?.[item.prop]"
            :key="iten.dm"
            :label="iten.mc"
            :value="iten.dm"
          ></el-option>
        </el-select>
        <!-- 日期选择 -->
        <el-date-picker
          :disabled="item.disabled"
          v-model="props.formData[item.prop]"
          :placeholder="item.placeholder"
          :type="item.type"
          v-else-if="item.type == 'daterange'"
          range-separator="至"
          :start-placeholder="item.placeholderStart"
          :end-placeholder="item.placeholderEnd"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
        ></el-date-picker>
        <!-- 树形选择框 -->
        <tree-select
          style="width: 100%"
          :multiple="item.multiple"
          v-else-if="item.type == 'treeSelect'"
          v-model="props.formData[item.prop]"
          :clearable="item.clearable"
          :searchPlaceholder="item.placeholder"
          :treeProps="item.props"
          :isLeafNode="item.isLeafNode"
          :check-strictly="item.checkStrictly"
          :node-key="item.nodeKey"
          :options="item.options?.length ? item.options : props.optionsObj?.[item.prop]"
        ></tree-select>
        <!-- 可全选树形选择框 -->
        <tree-select-all
          :multiple="item.multiple"
          v-else-if="item.type == 'treeSelectAll'"
          v-model="props.formData[item.prop]"
          :clearable="item.clearable"
          :searchPlaceholder="item.placeholder"
          :treeProps="item.props"
          :isLeafNode="item.isLeafNode"
          :check-strictly="item.checkStrictly"
          :node-key="item.nodeKey"
          :options="item.options?.length ? item.options : props.optionsObj?.[item.prop]"
          :show-all-selection="item.showAll"
          :show-current-button="item.showCurrentButton"
        ></tree-select-all>
        <!-- 单选框 -->
        <el-radio-group v-else-if="item.type == 'radio'" v-model="props.formData[item.prop]">
          <el-radio v-for="iten in item.options" :key="iten.value" :value="iten.value">{{
            iten.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :class="{ left: formLabelList?.length < 2 }">
        <el-button type="primary" plain v-show="props.moreShow" @click="moreClickBtn"
          >更多条件</el-button
        >
        <el-button type="primary" @click="searchHandle">查询</el-button>
      </el-form-item>
    </el-form>

    <MoreDialog
      ref="moreDialog"
      :formData="props.formData"
      :formLabel="props.formLabel"
      :optionsObj="props.optionsObj"
      :queryDataObj="props.queryDataObj"
      @searchEvent="searchEvent"
    ></MoreDialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  border: none;
}
.form-style {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid #dae4f1;
  margin-bottom: 10px;

  :deep(.el-form-item) {
    width: 20%;
    margin-right: 0;
    margin-bottom: 10px;
    &:last-child {
      width: auto;
      margin-left: auto;
      .el-form-item__content {
        display: flex;
        justify-content: flex-end;
      }
      &.left {
        margin-left: 10px;
        .el-form-item__content {
          justify-content: flex-start;
        }
      }
    }
  }
}
</style>
